<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <!--        1 学生 2 职工-->
        <span>问卷详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-row v-if="editBody">
          <el-col :span="20" class="warp-main">
            <el-form label-width="100px">
              <el-form-item label="问卷标题:" prop="title">
                <p>{{ editBody.title }}</p>
              </el-form-item>
              <el-form-item label="问卷描述:">
                <p v-html="editBody.description" v-if="editBody.description"></p>
                <p v-else>无</p>
              </el-form-item>
              <el-form-item label="问卷时间:" prop="end_time">
                <p>{{ editBody.start_time }} 至 {{ editBody.end_time }}</p>
              </el-form-item>
              <el-form-item label="问卷状态:" prop="end_time">
                <span v-if="editBody.status==0" class="c-danger">未提交</span>
                <span v-if="editBody.status==1" class="c-success">已提交</span>
                <span v-if="editBody.status==2" class="c-danger">已过期</span>
              </el-form-item>
              <el-form-item label="签名:" v-if="editBody.status && signDetail">
                <viewerModle type="1" :imgSrc="signDetail.pic" widthNumber="small"></viewerModle>
              </el-form-item>
              <el-form-item label="问卷内容:">
                <div class="iconlist" v-if="editBody.status==0">
                  <div style="display: flex;align-items: center;">
                    <el-button @click="autograghVisible=true" size="small">签字确认</el-button>
                    <span :style="{color: signPic?'green':'red'}" class="ml-10">{{ signPic ? '已签字确认' : '未签字确认' }}</span>
                  </div>
                  <div class="bodycontent pd10">
                    <div class="mylist mb-30" v-for="(item,index) in orderList" :key="index">
                      <p class="mylist-title">
                        <span>{{ index + 1 }}.</span>{{ item.content }}{{
                          item.type == 1 ? '（单选）' : ''
                        }}{{ item.type == 2 ? '（多选）' : '' }}{{ item.is_must == 0 ? '非必填' : '必填' }}
                      </p>
                      <div class="list-content" v-if="item.type==3">
                        <el-input v-model="item.option[0].word" placeholder="填写问题内容"
                                  class="mylist-content-line-textarea"
                                  type="textarea"></el-input>
                      </div>
                      <div class="mylist-content" v-else>
                        <div class="mylist-content-line" v-for="(items,indexs) in item.option" :key="indexs">
                          <p @click="checkicon(index,indexs)">
                          <span class="mylist-content-line-icon">
                            <i class="iconfont iconcheck"
                               :class="items.checked?'icondagou':'iconxuanzhongyuandian'"></i>
                          </span>
                            <span class="mylist-content-line-text">{{ items.index }}. {{ items.text }}</span>
                          </p>
                          <input type="text" class="mylist-content-line-input w-140 ml-10" v-if="items.type==1"
                                 v-model="items.word" placeholder="其他内容">
                          <!--<el-input v-model="items.word" placeholder="其他内容" class="mylist-content-line-input w-140 ml-10" v-if="items.type==1" type="text" @input="inputFn"></el-input>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div class="bodycontent pd10">
                    <div v-for="(items,index) in listCheck" :key="index">
                      <p class="mylist-title">
                        {{ index + 1 }}.
                        {{ items.content }}{{ items.type == 1 ? '（单选）' : '' }}{{
                          items.type == 2 ? '（多选）' : ''
                        }}{{ items.type == 3 ? '（用户自行输入）' : '' }}
                      </p>
                      <div v-if="items.type!==3">
                        <div v-for="(line,indexs) in items.option" class="inlinebox" :key="indexs">
                          <p>{{ line.index }}.{{ line.text }}<span v-if="line.type==1">(可输入自定义文字)</span>
                          </p>
                        </div>
                        <div class="userAnser" v-if="editBody.status==1">
                          <span>我的答案{{
                              items.answer.option ? `(${items.answer.option}:${items.answer.content})` : '无'
                            }}</span>
                        </div>
                      </div>
                      <div v-else>
                        <div class="inlinebox" v-if="editBody.status!==1">
                          用户自行输入
                        </div>
                        <div v-else class="userAnser">
                          <span>你的答案{{
                              items.answer.option ? `(${items.answer.option}:${items.answer.content})` : '无'
                            }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
        <el-button type="primary" @click="onSubmit" v-if="editBody && editBody.status==0" size="small">确认提交</el-button>
      </div>
    </div>
    <sign :visible.sync="autograghVisible" :signPic="signPic" @signPinFn="signPinFn"></sign>
  </div>
</template>

<script>
export default {
  props: ['visible', 'detailId'], // commoent 学生点评 collection 学生采集
  components: {},
  data() {
    return {
      autograghVisible: false,
      signPic: '',
      dialogVisible: false,
      qustionCheck: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      dialogTableVisible: false,
      arryList: null,
      editId: this.$route.query.editId,
      listCheck: [],
      teachertype: 0,
      dynamicTags: [],
      dynamicTagsId: [],
      dynamicTagsArray: {},
      editBody: null,
      orderList: null,
      flag: true,
      signDetail: null
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible && this.detailId) {
        this.Inint()
      } else {
        this.editBody = null
      }
    }
  },
  created() {
  },
  methods: {
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    Inint() {
      this.$fetch(this.api.questionnaire_inside_mydetail, {id: this.detailId}).then((response) => {
        if (response.code === 0) {
          this.listCheck = response.list
          for (let i in response.list) {
            if (response.list[i].type !== 3) {
              for (let j in response.list[i].option) {
                response.list[i].option[j]['checked'] = false
                if (response.list[i].option[j].type == 1) {
                  response.list[i].option[j]['word'] = ''
                }
              }
            } else {
              response.list[i].option.push({word: ''})
            }
          }
          console.log('response.list:', response.list)
          response.vo.start_time = response.vo.start_time.split(' ')[0]
          response.vo.end_time = response.vo.end_time.split(' ')[0]
          this.signDetail = response.sign
          this.orderList = response.list
          this.editBody = response.vo

          // this.detailCheckFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    detailCheckFn() {
      console.log('listCheck', this.listCheck)
      for (let i in this.listCheck) {
        let option = this.listCheck[i]
        this.$fetch(api.questionnaire_option, {id: this.listCheck[i].id}).then((response) => {
          if (response.code === 0) {
            for (let j in response.list) {
              option.option[j].number = response.list[j].number
            }
            this.$set(this.listCheck, i, option)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    onSubmit() {
      let this_ = this
      console.log('提交数据类型', this.orderList)
      // id 	字符串 	必填 	1 	- 	问卷id
      // name 	字符串 	必填 	1 	- 	签名
      // option 	字符串 	必填 	1 	- 	选项json
      let data_ = {}
      data_.id = this.detailId

      let option_ = []
      // id 1 option a,b contnet 选项1,选项2
      for (let i in this.orderList) {
        let obj_ = {}
        obj_.id = this.orderList[i].id
        let option = ''
        let content = ''
        if (this.orderList[i].type !== 3) {
          for (let j in this.orderList[i].option) {
            if (this.orderList[i].option[j].checked) {
              if (!option) {
                option += this.orderList[i].option[j].index
              } else {
                option += ',' + this.orderList[i].option[j].index
              }
              // 1 带输入框 2 否
              if (!content) {
                if (this.orderList[i].option[j].type == 1) {
                  content += this.orderList[i].option[j].word
                } else {
                  content += this.orderList[i].option[j].text
                }
              } else {
                if (this.orderList[i].option[j].type == 1) {
                  content += ',' + this.orderList[i].option[j].word
                } else {
                  content += ',' + this.orderList[i].option[j].text
                }
              }
              obj_.option = option
              obj_.content = content
            }
          }
        } else {
          obj_.option = 'A' // 空
          obj_.content = this.orderList[i].option[0].word
        }
        obj_.type = this.orderList[i].type
        obj_.is_must = this.orderList[i].is_must
        option_.push(obj_)
      }
      if (!this.signPic) {
        this.$message.error('请签名确认')
        return
      }
      console.log('option_:', option_)
      let status = true
      let optionData = []
      for (let item of option_) {
        if(item.is_must){
          if ((item.type === 1 || item.type === 2) && !item.option) {
            status = false
          }
          if ((item.type === 1 || item.type === 2) && item.option) {
            optionData.push(item)
          }

          if (item.type === 3 && !item.content) {
            status = false
          }
          if (item.type === 3 && item.content) {
            optionData.push(item)
          }
        }else{
          if ((item.type === 1 || item.type === 2) && item.option) {
            optionData.push(item)
          }
          if (item.type === 3 && item.content) {
            optionData.push(item)
          }
        }
      }
      if (!status) {
        console.log('请回答问卷内容')
        this.$message.error('请回答问卷必填内容')
        return
      }
      data_.option = JSON.stringify(optionData)
      data_.pic = this.signPic
      console.log('最后的信息内容', data_)
      console.log('最后的信息内容123', this.orderList)
      if (this.flag) {
        this.flag = false
        this.$post(this.api.questionnaire_inside_writeadd, data_).then((response) => {
          console.log(response)
          if (response.code === 0) {
            for (let i in this.orderList) {
              if (this.orderList[i].type !== 3) {
                for (let j in this.orderList[i].option) {
                  this.orderList[i].option[j]['checked'] = false
                  if (this.orderList[i].option[j].type == 1) {
                    this.orderList[i].option[j]['word'] = ''
                  }
                }
              } else {
                this.orderList[i].option[0].word = ''
              }
            }
            this.$message.success(response.msg)
            this.Inint()
            this.$emit('InitFn')
          } else {
            console.log('请求失败')
            this.$message.error(response.msg)
            this.flag = true
          }
          setTimeout(() => {
            this_.flag = true
          }, 500)
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    checkicon(index, indexs) {
      // 1 单选项; 2 多选项; 3 输入框
      let indexList = this.orderList[index]
      if (indexList.type == 1) {
        for (let i in indexList.option) {
          indexList.option[i].checked = false
        }
        indexList.option[indexs].checked = !this.orderList[index].option[indexs].checked
      } else if (this.orderList[index].type == 2) {
        indexList.option[indexs].checked = !this.orderList[index].option[indexs].checked
      }
      this.$set(this.orderList, index, indexList)
    },
    signPinFn(option) {
      this.signPic = option.pic
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 70%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}

.hearder-search {
  display: flex;
  align-items: center;
}
</style>


